<!-- 查看学生信息详情 -->
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="50%" @close="closeDialog">
    <el-form :model="studentModel" label-width="100px" style="padding-right: 30px">
      <el-form-item label="姓名：">
        <el-input v-model="studentModel.name" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="学生身份证：" prop="phone">
        <el-input v-model="studentModel.studentCardId" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="phone">
        <el-input v-model="studentModel.sex" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="住址：" prop="domicile">
        <el-input v-model="studentModel.domicile" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="生日：" prop="phone">
        <el-input v-model="studentModel.birthday" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="家长身份证：" prop="phone">
        <el-input v-model="studentModel.parentCardId" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="家长手机号：" prop="phone">
        <el-input v-model="studentModel.parentPhone" :disabled="disabled"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer" v-show="title != '查看学生信息'">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="updatestudentId()">修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { getStudentDetail, updateStudentDetail } from "@/api/student/index";
import message from "@/composable/ElMessage";

const dialogVisible = ref(false);
const title = ref("");
const disabled = ref(false);

const studentModel = reactive({
  id: 0,
  name: "",
  birthday: "",
  sex: "",
  studentCardId: "",
  parentCardId: "",
  parentPhone: "",
  domicile: "",
});

const open = (t: string, row: any) => {
  dialogVisible.value = true;
  title.value = t;
  if (t === "修改学生信息") {
    Object.assign(studentModel, row);
    disabled.value = true;
  }
  getInfo(row.id);
};

// 获取学生信息
const getInfo = async (id: number) => {
  const { data } = await getStudentDetail(id);
  Object.assign(studentModel, data);
};

const emit = defineEmits(["getInfo"]);
// 修改学生信息
const updatestudentId = async () => {
  await updateStudentDetail(studentModel).then((res: any) => {
    if (res.code === "200") {
      message.success("修改成功");
      emit("getInfo");
    } else {
      message.error("修改失败");
    }
  });
  closeDialog();
};

const closeDialog = () => {
  dialogVisible.value = false;
  Object.assign(studentModel, {
    id: 0,
    name: "",
    birthday: "",
    sex: "",
    studentCardId: "",
    parentCardId: "",
    parentPhone: "",
    domicile: "",
  });
};
defineExpose({ open, close });
</script>
